<!DOCTYPE html>
<html lang="zh">
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <style>
        #gallery .file-caption-main {
            display: none;
        }

        #gallery .file-preview {
            border: 0;
        }

        #gallery .active-item {
            background-color: aliceblue;
        }


        #gallery .file-caption-main {
            display: none;
        }

        #gallery .file-drop-zone-title {
            color: #fff;
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <input type="hidden" id="url" value=""/>
     <div class="row">
         <div class="col-sm-12">
             <div class="iboxXXXXXX float-e-margins" style="height: 100px;">
                 <!-- <div class="ibox-title">
                     <h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
                 </div> -->
                 <div class="ibox-content-XXXX">
                 	<!-- <div class="form-group">
                         <label class="font-noraml">简单示例</label>
	                      <div class="file-loading">
				            <input id="fileinput-upload" class="file" type="file" name="file" data-min-file-count="1" data-theme="fas">
				          </div>
                     </div> -->
                     
                   	<div class="form-group">
                         <!-- <label class="font-noraml">多文件上传</label> -->
	                     <!-- <div class="file-loading"> -->
				            <input id="fileinput-upload" type="file" name="file" multiple>
				        <!--  </div> -->
                     </div>
                     <hr>
                    <!--
                     <div class="form-group">
                         <label class="font-noraml">相关参数详细信息</label>
                         <div>
                         	<a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput" target="_blank">
                         		http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput
                         	</a>
                         </div>
                     </div>
                      -->
                 </div>
             </div>
         </div>
     </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    $(document).ready(function () {
    	 $("#fileinput-upload").fileinput({
    		 'uploadUrl': "/file/image/uploadWithSize?width=[[${width}]]&height=[[${width}]]", //上传的地址(访问接口地址)
             'theme': 'explorer-fas',
             overwriteInitial: false,
             minFileCount: 1,// 最小上传数量
             maxFileCount: 1,// 最大上传数量
             showClose: false,//右上角小叉号
             showUpload:false,//是否显示上传按钮
             allowedFileExtensions:  ['jpg', 'png', 'jpeg', 'gif', 'bmp'],
             //zoomModalHeight:100,
             //maxImageHeight:'100px',
             initialPreviewAsData: true,
             previewSettings:{ 
            	 image: {width: "auto", height: "100px"}/* , 
            	 html: {width: "213px", height: "100px"}, 
            	 text: {width: "213px", height: "100px"}, 
            	 video: {width: "auto", height: "100px", 'max-width': "100%"}, 
            	 audio: {width: "100%", height: "30px"}, 
            	 flash: {width: "auto", height: "100px", 'max-width': "100%"}, 
            	 object: {height: "100px"}, 
            	 pdf: {width: "100px", height: "100px"}, 
            	 other: {width: "100px", height: "100px"} */
           	},
             uploadExtraData: function (previewId, index) {   //额外参数的关键点
                 var obj = {};
                 obj.serverType = 1;  //参数 LOCAL(1), QI_NIU_YUN(2);
                 return obj;
             }/* ,
             initialPreview: ["/img/profile.jpg"] */
         }).on('fileuploaded', function(e, params) {
             console.log('File uploaded params', params);
             console.info(params.response);
             if(params.response.code==200){
            	 $.modal.msgSuccess(params.response.msg)
                 //$("#url").val(params.response.path);
            	 //parent.callBackUploadImg(params.response.path);
            	 var _method=[[${callBackMethod}]];
				 if(_method){
		        	eval(_method+"(params.response.path)"); 
				 }	
                 var index = parent.layer.getFrameIndex(window.name);
                 parent.layer.close(index);
             }else{
            	 $.modal.alertWarning(params.response.msg)           	 
             }
         });
    });

    function uploadFile(){
    	$("#fileinput-upload").fileinput("upload");
    }
</script>
</body>
</html>
